<!DOCTYPE html>
<html lang="en">
<head>
    <title>毒鸡汤</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <script type="text/javascript" src="js/jquery-1.7.2.js"></script>
    <script type="text/javascript">
        var nowPageNum=1;
        var pageSize=10;
        var amount =0;
        //使用ajax的方式

        function getSentenceAmount(){
            $.post('count',null,function(num){
                amount = parseInt(num);
            })
        }

        function getPageSentence() {

            $.post('getPage',{"pageSize":pageSize , "pageNum":nowPageNum},function(data){
                var result ="";
                result+="<table border='1px' height='150px' cellpadding='10px' cellspacing='3px'>"
                for(var i =0 ;i<data.length;i++){
                    result+="<tr>";
                    result+="<td>"+data[i].id+"</td><td>"+data[i].sentence+"</td><td>"+
                        "<input type='button' value='删除' onclick='delSentence(this)'></td>";
                    result+="</tr>";
                }
                var div = document.getElementById("showdiv");
                div.innerHTML = result;
            })
        }

        function delSentence(sentence){
            var id = sentence.parentNode.previousSibling.previousSibling.textContent;
            var tr = sentence.parentNode.parentNode;
            $.post('delete',{"id":id},function(data){
                if(data == 0){
                    //删除失败
                    alert("删除失败，稍后再试");
                }else{
                    //在页面删除这一行
                    tr.parentNode.removeChild(tr);
                    alert("删除成功");
                }
            })
        }

        function showNowPageNum(){
            document.getElementById("page").innerHTML="第"+nowPageNum+"页";
        }

        function updatePageSentence(){
            pageSize=document.getElementById('pageSize').value;
            getPageSentence();
        }

        function changePage(operation){
            switch(operation){
                case "add":
                    nowPageNum++;
                    break;
                case "reduce":
                    if(nowPageNum == 1){
                        return false;
                    }else{
                        nowPageNum--;
                    }
                    break;
                case "firstPage":
                    nowPageNum=1;
                    break;
                case "lastPage":
                    nowPageNum= Math.floor(amount/pageSize==0 ?amount/pageSize : amount/pageSize+1)
                    break;
            }

            updatePageSentence();
            showNowPageNum();
        }

        window.onload=function(){
            getSentenceAmount();
            updatePageSentence();
            showNowPageNum();
        }

    </script>
</head>
<body>

<h2>所有的鸡汤都在这里了</h2>
每页显示几条：
<select name="pageSize" id="pageSize" onchange="updatePageSentence()" >
    <option value="">---请选择---</option>
    <option value="5">5</option>
    <option value="10" selected="selected">10</option>
    <option value="20" >20</option>
</select> <br />

<input type="button" value="首页" onclick="changePage('firstPage')">
<input type="button" value="上一页" onclick="changePage('reduce')">
<b id="page"></b>
<input type="button" value="下一页" onclick="changePage('add')">
<input type="button" value="尾页" onclick="changePage('lastPage')">

<div id="showdiv"></div>


</body>
</html>